<template>
    <div style="width: 100%;margin: 10px auto;">
        <div class="operation" >
        <el-row type="flex" class="row-bg" justify="start">
                <el-input placeholder="请输入患者名" prefix-icon="el-icon-search" clearable @clear="initData" style="width: 450px;margin-right: 10px" v-model="keyword" @keydown.enter.native="search"></el-input>
                <el-button icon="el-icon-search" type="primary" @click="search">
                    搜索
                </el-button>
            <el-col >
                <el-button type="primary" icon="el-icon-plus"  @click="addDepAction" :disabled="this.notNurse">
                    添加病人检查项</el-button>
            </el-col>
        </el-row>
        </div>
    <el-table
            :header-cell-style="{background:'#c3e0cd',color:'#606266'}"
            :fit="true"
            :data="projectList"
            border
            style="margin: 15px">
        <el-table-column
                type="selection"
               >
        </el-table-column>
        <el-table-column
                fixed
                prop="id"
                label="病人检查列表id"
                min-width="120">
        </el-table-column>
        <el-table-column
                prop="projectId"
                label="检查项id"
                v-if="false"
        >
        </el-table-column>
        <el-table-column
                prop="projectName"
                label="检查项名称"
                min-width="130">
        </el-table-column>
        <el-table-column
                prop="patientId"
                label="病人id"
                v-if="false"
                >
        </el-table-column>
        <el-table-column
                prop="patientName"
                label="病人姓名"
                min-width="100">
        </el-table-column>
        <el-table-column
                prop="status"
                label="状态"
                min-width="170">
            <template slot-scope="scope">
                <el-switch
                        v-model="scope.row.status"
                        :active-value="false"
                        :inactive-value="true"
                        active-color="#ff4949"
                        inactive-color="#13ce66"
                        active-text="未检查"
                        inactive-text="已检查"
                        @change="changeStatus(scope.row)"
                />
            </template>
        </el-table-column>
        <el-table-column
                prop="time"
                label="检查时间"
                min-width="160">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                min-width="100">
            <template slot-scope="scope">
                <el-button @click="deleteClick(scope.row)" type="danger" round size="small">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%">
            <el-form :model="form" >
                <el-form-item label="病人姓名" :label-width="formLabelWidth">
                    <el-select v-model="form.patientId" :placeholder="form.patientName">
                        <el-option v-for = "item in patient" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="检查项" :label-width="formLabelWidth">
                    <el-select v-model="form.projectId" :placeholder="form.projectName">
                        <el-option v-for = "item in project" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="pushData">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
                title="提示"
                :visible.sync="emptyVisible"
                width="30%">
            <span>真的要改变该病人检查项的状态吗</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="emptyVisible = false">取 消</el-button>
                <el-button type="primary" @click="emptyData">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import MY from "../../global_variable";

    export default {
        name: "ProjectList",
        data() {
            return {
                notNurse:JSON.parse(sessionStorage.getItem("user")).role==3,
                keyword:'',
                dialogVisible:false,
                projectList:[],
                formLabelWidth: '120px',
                form:{
                  projectId:'',
                  patientId:'',
                  projectName:'',
                  patientName:'',
                },
                emptyVisible:false,
                oneRow:{
                  id:'',
                  status:''
                },
                project:[],
                patient:[],
                total:0,
                currentPage:1,
                pageSize:5,
                projectLists:[]
            }
        },
        mounted() {
            this.initData()
        },
        methods:{
            handleSizeChange: function (size) {
                this.pageSize = size;
                console.log(this.pageSize)  //每页下拉显示数据
                if(this.keyword!=''){
                    this.search()
                }else{
                    this.pageRequest(1,this.pageSize)
                }
            },
            handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
                if(this.keyword!=''){
                    this.search()
                }else{
                    this.pageRequest(currentPage,this.pageSize)
                }
                console.log(this.currentPage)  //点击第几页
            },
            pageRequest(start,size){
                var pn={
                    pageNum:start,
                    pageSize:size
                }
                this.getRequest(MY.myURL+'/projectList/getProjectListByPage',pn).then(resp=>{
                    console.log('分页')
                    console.log(resp)
                    if(resp.data.code=='4009'){
                        this.projectList=resp.data.data.listPros
                        this.total=resp.data.data.total
                        this.currentPage=pn.pageNum
                    }
                })
            },
            addDepAction(){
                this.dialogVisible=true
                this.getRequest(MY.myURL+'/patient/getAllPatients').then(resp=>{
                    if(resp.data.code=='4010'){
                        this.patient=resp.data.data
                    }
                    console.log(resp)
                })
                this.getRequest(MY.myURL+'/project/getAllProjects').then(resp=>{
                    if(resp.data.code=='4010'){
                        this.project=resp.data.data
                    }
                    console.log(resp)
                })
            },
            pushData(){
                console.log(this.form)
                if (this.form.projectId == '' || this.form.patientId=='') {
                    this.$message({
                        message: '该检查项目和病人姓名不能空',
                        type: 'error'
                    });
                } else {
                    this.getRequest(MY.myURL + '/projectList/insertProjectList', this.form).then(resp => {
                        console.log(resp)
                        if (resp.data.code == '4001') {
                            this.$message({
                                message: resp.data.message,
                                type: 'success'
                            });
                            this.clearForm()
                            this.dialogVisible = false
                           // this.refreshData()
                            if(this.keyword!=''){
                                this.search();
                            }else{
                                this.pageRequest(Math.ceil((this.total+1)/this.pageSize),this.pageSize)

                            }
                        }
                    })
                }
            },
            search(){
                var pn={
                    patientName:this.keyword
                }
                this.getRequest(MY.myURL+'/projectList/fuzzyQueryProjectListProByPatientName',pn).then(resp=>{
                    console.log(resp)
                    if(resp.data.code=='4010'){
                        this.projectLists=resp.data.data
                        this.total=this.projectLists.length
                        let begin=0
                        let end=0
                        if(Math.ceil(this.total/this.pageSize)<this.currentPage){
                            begin=0
                            end=this.pageSize
                            this.currentPage=1
                        }else{
                            begin=(this.currentPage-1)*this.pageSize
                            end=(this.currentPage*this.pageSize)
                        }
                        this.projectList=this.projectLists.slice(begin,end)

                    }
                })
            },
            emptyData(){
                this.getRequest(MY.myURL+'/projectList/updateProjectListStatusById',this.oneRow).then(resp=>{
                    console.log(resp)
                    if(resp){
                        console.log(3)
                        this.$message({
                            type: 'success',
                            message: resp.data.message
                        });
                        this.freshData()
                    }
                })
                this.emptyVisible=false
                console.log(this.oneRow)
            },
            changeStatus(row){
                console.log(row)
                this.oneRow.id=row.id
                this.oneRow.status=row.status
                this.emptyVisible=true

             },
            deleteClick(row) {
                console.log(row.name)
                var path = MY.myURL + '/projectList/deleteOneProjectList'
                this.$confirm('此操作将永久删除病人检查项为 '+row.id+'的数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var pn={
                        id:row.id
                    }
                    this.getRequest(path,pn).then(resp => {
                        console.log(2)
                        console.log(resp)
                        console.log(2)
                        if (resp.data.code == '4005') {
                            console.log(3)
                            this.$message({
                                type: 'success',
                                message: resp.data.message
                            });
                            console.log(3)
                           // this.refreshData()
                            if(this.keyword!=''){
                                this.search()
                            }else{
                                if(this.projectList.length==1){
                                    this.pageRequest(this.currentPage-1,this.pageSize)

                                }else{
                                    this.pageRequest(this.currentPage,this.pageSize)
                                }
                            }

                        } else {
                            this.$message({
                                type: 'error',
                                message: resp.data.message
                            });
                        }
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            },

            initData(){
                this.pageRequest(1,5)
            },
            refreshData(){
              this.initData()
            },
            clearForm(){
                this.form.patientId=''
                this.form.projectId=''
                this.form.projectName=''
                this.form.patientName=''
            }
        }
    }
</script>

<style scoped>

</style>
